<script setup lang='ts'>
import { ref, onMounted } from "vue"
import { getSearchResult, getBookChapterList, getSearchOnload } from "@/api/index"
import { useRouter } from 'vue-router'
import { useCounterStore } from '../stores/counter'
import BookViewFirst from "@/components/BookViewFirst.vue"
const $router = useRouter()
const searchtext = ref<any>($router.currentRoute.value.query.text)
const bookList = ref<any>()
onMounted(async () => {
    let res = await getSearchResult($router.currentRoute.value.query.text)
    bookList.value = res.data.data.books

})
const store = useCounterStore()

const value1 = ref<any>(0);
const value2 = ref<any>('a');

const options1 = [
    { text: '综合排序', value: 0 },
    { text: '销量最高', value: 1 },
    { text: '人气最旺', value: 2 },
    { text: '最新上架', value: 3 },
    { text: '最近更新', value: 4 },
];
const options2 = [
    { text: '全部频道', value: 'a' },
    { text: '男生', value: 'b' },
    { text: '女生', value: 'c' },
    { text: '出版', value: 'd' },
];
const filterTypeList = ref<any>(['全部', '完结', '连载'])
const filterPriceList = ref<any>(['全部', '免费', '包月', '收费'])
const filterCountList = ref<any>(['全部', '30万字以下', '30-50万字', '50-100万字', '100万字以上'])
const filterType = ref<string>('全部')
const filterPrice = ref<string>('全部')
const filterCount = ref<string>('全部')

const toBookContent = async (book: any) => {

    let bookChapterRes = await getBookChapterList(book.bookId)

    store.getChapter(bookChapterRes.data.data.catalog)
    $router.push({
        path: '/detail', query: {
            id: book.bookId, title: book.title
        }
    })

}

//触底加载
const loading = ref<boolean>(false)
const finished = ref<boolean>(false)
const isLoading = ref<boolean>(false)
const page_num = ref<number>(1)
const onLoad = async () => {
    if (!isLoading.value) {
        isLoading.value = true
        page_num.value += 1
        let res: any = await requestSearchBook()

        bookList.value = [...bookList.value, ...res.data.data.books]
        isLoading.value = false
        loading.value = false
    }
}



const requestSearchBook = async () => {
    let sort = options1.findIndex((o: any) => o.value == value1.value)
    let channel = options2.findIndex((o: any) => o.value == value2.value)
    let bookStatus = filterTypeList.value.findIndex((o: any) => o == filterType.value)
    let pay = filterPriceList.value.findIndex((o: any) => o == filterPrice.value)
    let wordCount = filterCountList.value.findIndex((o: any) => o == filterCount.value)
    let res = await getSearchOnload(searchtext.value, page_num.value, sort, channel, bookStatus, pay, wordCount)
    return res
}

const changeTupeBook = async () => {
    page_num.value = 1
    let res: any = await requestSearchBook()
    bookList.value = res.data.data.books
}
</script>

<template>
    <div class="search">
        <div class="search-title">
            <div class="left">
                <img src="@/assets/imgs/搜索1.png" alt="">
                <input type="text" placeholder="唐诗里的烟火人间" ref="search" v-model="searchtext"
                    @keyup.enter="$router.push({ path: '/search-show', query: { text: searchtext } })">
                <img src="@/assets/imgs/叉叉1.png" alt="" v-if="searchtext != ''"
                    @click="searchtext = ''; $router.replace('/search')">
            </div>
            <span @click="$router.back()">取消</span>
        </div>
        <van-dropdown-menu active-color="#ee0a24">
            <van-dropdown-item v-model="value1" :options="options1" @change="changeTupeBook" />
            <van-dropdown-item v-model="value2" :options="options2" @change="changeTupeBook" />
            <!-- <van-dropdown-item v-model="value" :options="options3" /> -->
            <van-dropdown-item title="筛选" ref="filter" class="filter">
                <div class="filter-type">
                    <span>完结状态</span>
                    <ul class="list">
                        <li :class="{ active: filterType == item }" @click="filterType = item; changeTupeBook()"
                            v-for="item, index in filterTypeList" :key="index">{{ item }}</li>

                    </ul>
                </div>
                <div class="filter-price">
                    <span>书籍价格</span>
                    <ul class="list">
                        <li :class="{ active: filterPrice == item }" @click="filterPrice = item; changeTupeBook()"
                            v-for="item, index in filterPriceList" :key="index">{{ item }}</li>
                    </ul>
                </div>
                <div class="filter-count">
                    <span>书籍字数</span>
                    <ul class="list">
                        <li :class="{ active: filterCount == item }" @click="filterCount = item; changeTupeBook()"
                            v-for="item, index in filterCountList" :key="index">{{ item }}</li>
                    </ul>
                </div>
            </van-dropdown-item>
        </van-dropdown-menu>
        <div class="search-book">
            <div class="book-shop" v-if="bookList">
                <span>书城</span>
                <van-list v-model:loading="loading" :finished="finished" :immediate-check="false" :offset="1"
                    finished-text="没有更多了" loading-text="数据加载中" error-text="加载失败" @load="onLoad">
                    <div class="book-shop-list">
                        <ul class="list">
                            <BookViewFirst v-for="book in bookList" :key="book.id" :bookinfo="book"
                                @click="toBookContent(book)" />
                        </ul>
                    </div>
                </van-list>

            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.search {
    background-color: #eee;

    .search-title {
        background-color: #fff;
        width: 100%;
        height: 50rem;
        padding: 0 10rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            display: flex;
            align-items: center;
            overflow: hidden;
            width: 85%;
            height: 30rem;
            background-color: #eee;
            border-radius: 20rem;

            img {
                width: 20rem;
                height: 20rem;
                margin-left: 5rem;

                &:last-child {
                    margin-right: 8rem;
                }
            }

            input {
                flex-grow: 1;
                border: none;
                background-color: #eee;
            }
        }

        >span {
            font-size: 16rem;
            color: #888;
        }
    }

    .filter {

        span {
            font-size: 14rem;
            color: #666;
            margin-left: 20rem;


        }

        ul.list {
            margin-left: 20rem;
            display: flex;
            flex-wrap: wrap;

            li {
                border: 1rem solid #ccc;
                border-radius: 5rem;
                padding: 5rem 13rem;
                margin-right: 10rem;
                margin-bottom: 10rem;
                font-size: 14rem;
                color: #888;
                box-sizing: border-box;

                &.active {
                    background-color: #fc1c1c;
                    color: #fff;
                    border: none;
                }
            }
        }
    }

    .search-book {
        width: 100vw;
        height: calc(100vh - 98rem);
        overflow: auto;
        padding: 10rem 0;

        .book-shop {
            span {
                font-size: 16rem;
                margin: 3rem 15rem;
                color: #666;
            }

            .book-shop-list {
                background-color: #fff;
                padding: 10rem 15rem 0;

            }
        }
    }
}
</style>
